<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
      <!-- 筛选条件 -->
      <div
        class="bg-white rounded-xl shadow-md p-4 mb-6 transform hover:shadow-lg transition-all duration-300"
      >
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1"
              >课程</label
            >
            <select
              class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
              <option>全部课程</option>
              <option>Vue基础</option>
              <option>Vue高级编程</option>
              <option>Vue项目实战</option>
              <option>Vue3+TypeScript</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1"
              >作业类型</label
            >
            <select
              class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
              <option>全部类型</option>
              <option>组件开发</option>
              <option>项目实战</option>
              <option>API集成</option>
              <option>状态管理</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1"
              >评分标准</label
            >
            <select
              class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
              <option>综合评分</option>
              <option>代码质量</option>
              <option>功能完整性</option>
              <option>UI设计</option>
              <option>交互体验</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1"
              >难度级别</label
            >
            <select
              class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
              <option>全部级别</option>
              <option>初级</option>
              <option>中级</option>
              <option>高级</option>
              <option>专家级</option>
            </select>
          </div>
        </div>
        <div class="mt-4 flex justify-end">
          <button
            class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-all duration-300 flex items-center"
          >
            <i class="fa fa-filter mr-2"></i>筛选数据
          </button>
        </div>
      </div>

      <!-- 统计概览 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div
          class="bg-white rounded-xl shadow-md p-4 transform hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
        >
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm">总提交数</p>
              <h3 class="text-3xl font-bold text-gray-800 mt-1">156</h3>
              <p class="text-green-500 text-sm mt-1 flex items-center">
                <i class="fa fa-arrow-up mr-1"></i> 24%
                <span class="text-gray-500 ml-1">vs 上月</span>
              </p>
            </div>
            <div class="bg-blue-100 p-3 rounded-lg">
              <i class="fa fa-code-fork text-blue-600 text-xl"></i>
            </div>
          </div>
        </div>
        <div
          class="bg-white rounded-xl shadow-md p-4 transform hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
        >
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm">平均得分</p>
              <h3 class="text-3xl font-bold text-gray-800 mt-1">85.6</h3>
              <p class="text-green-500 text-sm mt-1 flex items-center">
                <i class="fa fa-arrow-up mr-1"></i> 3.2
                <span class="text-gray-500 ml-1">vs 上月</span>
              </p>
            </div>
            <div class="bg-green-100 p-3 rounded-lg">
              <i class="fa fa-star text-green-600 text-xl"></i>
            </div>
          </div>
        </div>
        <div
          class="bg-white rounded-xl shadow-md p-4 transform hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
        >
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm">代码复用率</p>
              <h3 class="text-3xl font-bold text-gray-800 mt-1">68.2%</h3>
              <p class="text-green-500 text-sm mt-1 flex items-center">
                <i class="fa fa-arrow-up mr-1"></i> 5.8%
                <span class="text-gray-500 ml-1">vs 上月</span>
              </p>
            </div>
            <div class="bg-yellow-100 p-3 rounded-lg">
              <i class="fa fa-clone text-yellow-600 text-xl"></i>
            </div>
          </div>
        </div>
        <div
          class="bg-white rounded-xl shadow-md p-4 transform hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
        >
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm">Bug修复率</p>
              <h3 class="text-3xl font-bold text-gray-800 mt-1">92.5%</h3>
              <p class="text-red-500 text-sm mt-1 flex items-center">
                <i class="fa fa-arrow-down mr-1"></i> 1.8%
                <span class="text-gray-500 ml-1">vs 上月</span>
              </p>
            </div>
            <div class="bg-purple-100 p-3 rounded-lg">
              <i class="fa fa-bug text-purple-600 text-xl"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- 作业类型分布 -->
        <div
          class="bg-white rounded-xl shadow-md p-4 transform hover:shadow-lg transition-all duration-300"
        >
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-bold text-gray-800">作业类型分布</h2>
            <div class="flex space-x-2">
              <button
                class="px-3 py-1 rounded-md bg-blue-600 text-white text-sm"
              >
                本学期
              </button>
              <button
                class="px-3 py-1 rounded-md bg-gray-200 text-gray-700 text-sm hover:bg-gray-300 transition-colors"
              >
                上学期
              </button>
              <button
                class="px-3 py-1 rounded-md bg-gray-200 text-gray-700 text-sm hover:bg-gray-300 transition-colors"
              >
                全年
              </button>
            </div>
          </div>
          <div ref="assignmentTypeChart" class="w-full h-[300px]"></div>
        </div>

        <!-- 评分标准分析 -->
        <div
          class="bg-white rounded-xl shadow-md p-4 transform hover:shadow-lg transition-all duration-300"
        >
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-bold text-gray-800">评分标准分析</h2>
            <select
              class="rounded-lg border border-gray-300 px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
              <option>所有学生</option>
              <option>优秀学生</option>
              <option>待提高学生</option>
            </select>
          </div>
          <div ref="gradingChart" class="w-full h-[300px]"></div>
        </div>

        <!-- 代码质量趋势 -->
        <div
          class="bg-white rounded-xl shadow-md p-4 transform hover:shadow-lg transition-all duration-300"
        >
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-bold text-gray-800">代码质量趋势</h2>
            <div class="flex space-x-2">
              <button
                class="px-3 py-1 rounded-md bg-blue-600 text-white text-sm"
              >
                周
              </button>
              <button
                class="px-3 py-1 rounded-md bg-gray-200 text-gray-700 text-sm hover:bg-gray-300 transition-colors"
              >
                月
              </button>
              <button
                class="px-3 py-1 rounded-md bg-gray-200 text-gray-700 text-sm hover:bg-gray-300 transition-colors"
              >
                学期
              </button>
            </div>
          </div>
          <div ref="codeQualityChart" class="w-full h-[300px]"></div>
        </div>

        <!-- 组件复用分析 -->
        <div
          class="bg-white rounded-xl shadow-md p-4 transform hover:shadow-lg transition-all duration-300"
        >
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-bold text-gray-800">组件复用分析</h2>
            <select
              class="rounded-lg border border-gray-300 px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
              <option>按类型</option>
              <option>按学生</option>
              <option>按作业</option>
            </select>
          </div>
          <div ref="componentReuseChart" class="w-full h-[300px]"></div>
        </div>
      </div>

      <!-- 优秀作业展示 -->
      <div
        class="bg-white rounded-xl shadow-md p-4 mb-6 transform hover:shadow-lg transition-all duration-300"
      >
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-lg font-bold text-gray-800">优秀Vue作业展示</h2>
          <div class="flex space-x-2">
            <button class="px-3 py-1 rounded-md bg-blue-600 text-white text-sm">
              最新
            </button>
            <button
              class="px-3 py-1 rounded-md bg-gray-200 text-gray-700 text-sm hover:bg-gray-300 transition-colors"
            >
              最高评分
            </button>
            <button
              class="px-3 py-1 rounded-md bg-gray-200 text-gray-700 text-sm hover:bg-gray-300 transition-colors"
            >
              最具创意
            </button>
          </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div
            class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
          >
            <div
              class="bg-gradient-to-r from-indigo-500 to-blue-500 p-4 text-white"
            >
              <h3 class="font-medium mb-1">Vue3电商网站</h3>
              <p class="text-sm opacity-80">使用Vue3+TypeScript+Pinia构建</p>
            </div>
            <img
              src="https://picsum.photos/seed/vue1/600/400"
              alt="Vue3电商网站截图"
              class="w-full h-48 object-cover"
            />
            <div class="p-4">
              <div class="flex justify-between items-center mb-3">
                <div class="flex items-center">
                  <img
                    src="https://picsum.photos/seed/student11/40/40"
                    alt="学生头像"
                    class="w-8 h-8 rounded-full"
                  />
                  <span class="ml-2 text-sm font-medium">陈小明</span>
                </div>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400"></i>
                  <span class="ml-1 text-sm font-medium">96分</span>
                </div>
              </div>
              <div class="flex flex-wrap gap-2 mb-3">
                <span
                  class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full"
                  >Vue3</span
                >
                <span
                  class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full"
                  >TypeScript</span
                >
                <span
                  class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full"
                  >Pinia</span
                >
                <span
                  class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full"
                  >Vite</span
                >
              </div>
              <div class="flex justify-between">
                <button
                  class="text-blue-600 hover:text-blue-800 text-sm flex items-center"
                >
                  <i class="fa fa-code mr-1"></i>查看代码
                </button>
                <button
                  class="text-green-600 hover:text-green-800 text-sm flex items-center"
                >
                  <i class="fa fa-eye mr-1"></i>在线预览
                </button>
              </div>
            </div>
          </div>
          <div
            class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
          >
            <div
              class="bg-gradient-to-r from-purple-500 to-pink-500 p-4 text-white"
            >
              <h3 class="font-medium mb-1">Vue组件库</h3>
              <p class="text-sm opacity-80">自定义UI组件库开发</p>
            </div>
            <img
              src="https://picsum.photos/seed/vue2/600/400"
              alt="Vue组件库截图"
              class="w-full h-48 object-cover"
            />
            <div class="p-4">
              <div class="flex justify-between items-center mb-3">
                <div class="flex items-center">
                  <img
                    src="https://picsum.photos/seed/student12/40/40"
                    alt="学生头像"
                    class="w-8 h-8 rounded-full"
                  />
                  <span class="ml-2 text-sm font-medium">李华</span>
                </div>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400"></i>
                  <span class="ml-1 text-sm font-medium">94分</span>
                </div>
              </div>
              <div class="flex flex-wrap gap-2 mb-3">
                <span
                  class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full"
                  >Vue2</span
                >
                <span
                  class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full"
                  >SCSS</span
                >
                <span
                  class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full"
                  >Storybook</span
                >
                <span
                  class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full"
                  >Jest</span
                >
              </div>
              <div class="flex justify-between">
                <button
                  class="text-blue-600 hover:text-blue-800 text-sm flex items-center"
                >
                  <i class="fa fa-code mr-1"></i>查看代码
                </button>
                <button
                  class="text-green-600 hover:text-green-800 text-sm flex items-center"
                >
                  <i class="fa fa-eye mr-1"></i>在线预览
                </button>
              </div>
            </div>
          </div>
          <div
            class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
          >
            <div
              class="bg-gradient-to-r from-amber-500 to-orange-500 p-4 text-white"
            >
              <h3 class="font-medium mb-1">Vue3管理系统</h3>
              <p class="text-sm opacity-80">
                基于Vue3+Element Plus的后台管理系统
              </p>
            </div>
            <img
              src="https://picsum.photos/seed/vue3/600/400"
              alt="Vue3管理系统截图"
              class="w-full h-48 object-cover"
            />
            <div class="p-4">
              <div class="flex justify-between items-center mb-3">
                <div class="flex items-center">
                  <img
                    src="https://picsum.photos/seed/student13/40/40"
                    alt="学生头像"
                    class="w-8 h-8 rounded-full"
                  />
                  <span class="ml-2 text-sm font-medium">王大明</span>
                </div>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400"></i>
                  <span class="ml-1 text-sm font-medium">92分</span>
                </div>
              </div>
              <div class="flex flex-wrap gap-2 mb-3">
                <span
                  class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full"
                  >Vue3</span
                >
                <span
                  class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full"
                  >Vue Router</span
                >
                <span
                  class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full"
                  >Vuex</span
                >
                <span
                  class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full"
                  >Element Plus</span
                >
              </div>
              <div class="flex justify-between">
                <button
                  class="text-blue-600 hover:text-blue-800 text-sm flex items-center"
                >
                  <i class="fa fa-code mr-1"></i>查看代码
                </button>
                <button
                  class="text-green-600 hover:text-green-800 text-sm flex items-center"
                >
                  <i class="fa fa-eye mr-1"></i>在线预览
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 代码质量分析 -->
      <div
        class="bg-white rounded-xl shadow-md p-4 mb-6 transform hover:shadow-lg transition-all duration-300"
      >
        <h2 class="text-lg font-bold text-gray-800 mb-4">代码质量分析</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="bg-gray-50 rounded-lg p-4">
            <h3 class="font-medium text-gray-900 mb-3">代码规范检查</h3>
            <div class="space-y-3">
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span>ESLint合规率</span>
                  <span>94%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div
                    class="bg-green-600 h-2 rounded-full"
                    style="width: 94%"
                  ></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span>Prettier格式化率</span>
                  <span>98%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div
                    class="bg-blue-600 h-2 rounded-full"
                    style="width: 98%"
                  ></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span>组件命名规范</span>
                  <span>89%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div
                    class="bg-yellow-600 h-2 rounded-full"
                    style="width: 89%"
                  ></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span>注释覆盖率</span>
                  <span>76%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div
                    class="bg-orange-600 h-2 rounded-full"
                    style="width: 76%"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 rounded-lg p-4">
            <h3 class="font-medium text-gray-900 mb-3">性能指标</h3>
            <div class="space-y-3">
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span>首屏加载时间</span>
                  <span>1.2秒</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div
                    class="bg-green-600 h-2 rounded-full"
                    style="width: 85%"
                  ></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span>组件渲染性能</span>
                  <span>优秀</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div
                    class="bg-blue-600 h-2 rounded-full"
                    style="width: 92%"
                  ></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span>内存占用</span>
                  <span>良好</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div
                    class="bg-yellow-600 h-2 rounded-full"
                    style="width: 78%"
                  ></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span>响应式实现</span>
                  <span>88%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div
                    class="bg-green-600 h-2 rounded-full"
                    style="width: 88%"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
  
  <script>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";

export default {
  name: "StudentDashboard",
  setup() {
    // 图表引用
    const assignmentTypeChart = ref(null);
    const gradingChart = ref(null);
    const codeQualityChart = ref(null);
    const componentReuseChart = ref(null);

    // 初始化图表
    const initCharts = () => {
      // 作业类型分布图表
      const assignmentTypeChartInstance = echarts.init(
        assignmentTypeChart.value
      );
      assignmentTypeChartInstance.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: 10,
          data: [
            "组件开发",
            "项目实战",
            "API集成",
            "状态管理",
            "路由实现",
            "其他",
          ],
        },
        series: [
          {
            name: "作业类型",
            type: "pie",
            radius: ["30%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 45, name: "组件开发" },
              { value: 30, name: "项目实战" },
              { value: 15, name: "API集成" },
              { value: 10, name: "状态管理" },
              { value: 8, name: "路由实现" },
              { value: 5, name: "其他" },
            ],
          },
        ],
      });

      // 评分标准分析图表
      const gradingChartInstance = echarts.init(gradingChart.value);
      gradingChartInstance.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["代码质量", "功能完整性", "UI设计", "交互体验", "文档规范"],
        },
        xAxis: {
          type: "category",
          data: [
            "陈晨",
            "林小",
            "刘芳",
            "张强",
            "王丽",
            "黄华",
            "周杰",
            "吴佳",
            "郑明",
            "胡晓",
          ],
          axisPointer: {
            type: "shadow",
          },
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 100,
        },
        series: [
          {
            name: "代码质量",
            type: "bar",
            data: [95, 90, 88, 85, 92, 87, 91, 89, 86, 83],
            itemStyle: {
              color: "#36BFFA",
            },
          },
          {
            name: "功能完整性",
            type: "bar",
            data: [92, 94, 85, 88, 90, 89, 93, 87, 85, 82],
            itemStyle: {
              color: "#22C55E",
            },
          },
          {
            name: "UI设计",
            type: "bar",
            data: [88, 95, 92, 87, 85, 90, 88, 93, 86, 84],
            itemStyle: {
              color: "#EC4899",
            },
          },
          {
            name: "交互体验",
            type: "bar",
            data: [90, 92, 89, 91, 88, 86, 90, 89, 87, 85],
            itemStyle: {
              color: "#8B5CF6",
            },
          },
          {
            name: "文档规范",
            type: "bar",
            data: [93, 88, 90, 86, 91, 85, 89, 87, 90, 84],
            itemStyle: {
              color: "#F97316",
            },
          },
        ],
      });

      // 代码质量趋势图表
      const codeQualityChartInstance = echarts.init(codeQualityChart.value);
      codeQualityChartInstance.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["代码规范", "性能指标", "组件复用", "错误处理"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "第1周",
            "第2周",
            "第3周",
            "第4周",
            "第5周",
            "第6周",
            "第7周",
            "第8周",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "代码规范",
            type: "line",
            stack: "总量",
            data: [75, 78, 82, 85, 87, 90, 92, 94],
            itemStyle: {
              color: "#36BFFA",
            },
          },
          {
            name: "性能指标",
            type: "line",
            stack: "总量",
            data: [70, 73, 76, 79, 82, 85, 88, 90],
            itemStyle: {
              color: "#22C55E",
            },
          },
          {
            name: "组件复用",
            type: "line",
            stack: "总量",
            data: [65, 68, 72, 75, 78, 81, 84, 86],
            itemStyle: {
              color: "#EC4899",
            },
          },
          {
            name: "错误处理",
            type: "line",
            stack: "总量",
            data: [72, 74, 77, 80, 83, 85, 87, 89],
            itemStyle: {
              color: "#8B5CF6",
            },
          },
        ],
      });

      // 组件复用分析图表
      const componentReuseChartInstance = echarts.init(
        componentReuseChart.value
      );
      componentReuseChartInstance.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["复用次数"],
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: [
            "Button",
            "Input",
            "Table",
            "Card",
            "Modal",
            "Form",
            "Select",
            "Menu",
            "Pagination",
            "Avatar",
          ],
          axisLabel: {
            interval: 0,
          },
        },
        series: [
          {
            name: "复用次数",
            type: "bar",
            data: [42, 38, 35, 30, 28, 25, 22, 18, 15, 12],
            itemStyle: {
              color: "#8B5CF6",
            },
            label: {
              show: true,
              position: "right",
            },
          },
        ],
      });

      // 监听窗口大小变化，调整图表尺寸
      window.addEventListener("resize", () => {
        assignmentTypeChartInstance.resize();
        gradingChartInstance.resize();
        codeQualityChartInstance.resize();
        componentReuseChartInstance.resize();
      });
    };

    onMounted(() => {
      // 等待DOM渲染完成后初始化图表
      nextTick(() => {
        initCharts();
      });
    });

    return {
      assignmentTypeChart,
      gradingChart,
      codeQualityChart,
      componentReuseChart,
    };
  },
};
</script>
  
  <style scoped>
/* === Global Reset and Base Styles === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  background-color: #f8f9fa;
  color: #2d3748;
  line-height: 1.6;
  font-size: 16px;
}

/* === Header Styles === */
header {
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: fixed;
  width: 100%;
  z-index: 10;
}

header .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .flex {
  display: flex;
  align-items: center;
}

header .space-x-2 > * + * {
  margin-left: 8px;
}

header .space-x-4 > * + * {
  margin-left: 16px;
}

header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2b6cb0;
}

header .relative {
  position: relative;
}

header input {
  padding: 8px 32px 8px 32px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: #f8f9fa;
  font-size: 0.875rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

header input:focus {
  outline: none;
  border-color: #4299e1;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

header .absolute {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #a0aec0;
}

header button {
  background: linear-gradient(to right, #2b6cb0, #4299e1);
  color: #ffffff;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

header button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
}

header button i {
  margin-right: 8px;
}

/* === Main Content Styles === */
main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 16px 64px;
}

/* Filter Section */
main .bg-white.rounded-xl.shadow-md {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 16px;
  margin-bottom: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

main .bg-white.rounded-xl.shadow-md:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

main .grid {
  display: grid;
  gap: 16px;
}

main .grid-cols-1 {
  grid-template-columns: 1fr;
}

main .md\:grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

main label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4a5568;
  margin-bottom: 4px;
}

main select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: #f8f9fa;
  font-size: 0.875rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

main select:focus {
  outline: none;
  border-color: #4299e1;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

main .mt-4 {
  margin-top: 16px;
}

main .flex.justify-end {
  display: flex;
  justify-content: flex-end;
}

main .bg-blue-600 {
  background: linear-gradient(to right, #2b6cb0, #4299e1);
  color: #ffffff;
  padding: 8px 24px;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

main .bg-blue-600:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
}

main .bg-blue-600 i {
  margin-right: 8px;
}

/* Stats Cards */
main .grid-cols-1.md\:grid-cols-4 > div {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

main .grid-cols-1.md\:grid-cols-4 > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

main .grid-cols-1.md\:grid-cols-4 .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main .text-gray-500 {
  color: #a0aec0;
  font-size: 0.875rem;
}

main h3 {
  font-size: 2rem;
  font-weight: 800;
  color: #2d3748;
  margin-top: 4px;
}

main .text-green-500 {
  color: #48bb78;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}

main .text-red-500 {
  color: #f56565;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}

main .text-green-500 i,
main .text-red-500 i {
  margin-right: 4px;
}

main .ml-1 {
  margin-left: 4px;
}

main .bg-blue-100,
main .bg-green-100,
main .bg-yellow-100,
main .bg-purple-100 {
  padding: 12px;
  border-radius: 8px;
}

main .bg-blue-100 {
  background-color: #ebf8ff;
}
main .bg-green-100 {
  background-color: #f0fff4;
}
main .bg-yellow-100 {
  background-color: #fefcbf;
}
main .bg-purple-100 {
  background-color: #faf5ff;
}

main .text-blue-600 {
  color: #2b6cb0;
}
main .text-green-600 {
  color: #38a169;
}
main .text-yellow-600 {
  color: #d69e2e;
}
main .text-purple-600 {
  color: #805ad5;
}

/* Chart Cards */
main .grid-cols-1.lg\:grid-cols-2 {
  grid-template-columns: 1fr;
}

main .grid-cols-1.lg\:grid-cols-2 > div {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

main .grid-cols-1.lg\:grid-cols-2 > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

main .mb-4 {
  margin-bottom: 16px;
}

main h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2d3748;
}

main .space-x-2 > * + * {
  margin-left: 8px;
}

main .px-3.py-1 {
  padding: 4px 12px;
  font-size: 0.875rem;
  border-radius: 6px;
  cursor: pointer;
}

main .bg-blue-600.text-white {
  background-color: #2b6cb0;
  color: #ffffff;
}

main .bg-gray-200 {
  background-color: #e2e8f0;
  color: #4a5568;
}

main .bg-gray-200:hover {
  background-color: #cbd5e0;
}

main select.rounded-lg {
  padding: 4px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.875rem;
}

main select.rounded-lg:focus {
  outline: none;
  border-color: #4299e1;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

main [ref$="Chart"] {
  width: 100%;
  height: 300px;
}

/* Showcase Cards */
main .grid-cols-1.md\:grid-cols-3 {
  grid-template-columns: 1fr;
}

main .border.border-gray-200 {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

main .border.border-gray-200:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

main .bg-gradient-to-r {
  padding: 16px;
  color: #ffffff;
}

main .from-indigo-500.to-blue-500 {
  background: linear-gradient(to right, #4c51bf, #4299e1);
}
main .from-purple-500.to-pink-500 {
  background: linear-gradient(to right, #805ad5, #ed64a6);
}
main .from-amber-500.to-orange-500 {
  background: linear-gradient(to right, #d69e2e, #ed8936);
}

main .opacity-80 {
  opacity: 0.8;
}

main img {
  width: 100%;
  height: 192px;
  object-fit: cover;
}

main .p-4 {
  padding: 16px;
}

main .flex.items-center {
  display: flex;
  align-items: center;
}

main .w-8.h-8 {
  width: 32px;
  height: 32px;
}

main .rounded-full {
  border-radius: 50%;
}

main .ml-2 {
  margin-left: 8px;
}

main .text-sm {
  font-size: 0.875rem;
}

main .font-medium {
  font-weight: 500;
}

main .text-yellow-400 {
  color: #f6e05e;
}

main .gap-2 {
  gap: 8px;
}

main .px-2.py-1 {
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 9999px;
}

main .text-blue-800 {
  color: #2b6cb0;
}
main .text-purple-800 {
  color: #6b46c1;
}
main .text-green-800 {
  color: #2f855a;
}
main .text-yellow-800 {
  color: #b7791f;
}
main .text-red-800 {
  color: #c53030;
}
main .text-indigo-800 {
  color: #4c51bf;
}

main .text-blue-600.text-sm {
  color: #2b6cb0;
  font-size: 0.875rem;
  cursor: pointer;
}

main .text-blue-600.text-sm:hover {
  color: #1a4971;
}

main .text-green-600.text-sm {
  color: #38a169;
  font-size: 0.875rem;
  cursor: pointer;
}

main .text-green-600.text-sm:hover {
  color: #276749;
}

main .mr-1 {
  margin-right: 4px;
}

/* Code Quality Section */
main .bg-gray-50 {
  background-color: #f7fafc;
  border-radius: 8px;
  padding: 16px;
}

main .space-y-3 > * + * {
  margin-top: 12px;
}

main .bg-gray-200.rounded-full {
  background-color: #e2e8f0;
  border-radius: 9999px;
  height: 8px;
}

main .bg-green-600.h-2,
main .bg-blue-600.h-2,
main .bg-yellow-600.h-2,
main .bg-orange-600.h-2 {
  height: 8px;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

main .bg-green-600 {
  background-color: #48bb78;
}
main .bg-blue-600 {
  background-color: #4299e1;
}
main .bg-yellow-600 {
  background-color: #d69e2e;
}
main .bg-orange-600 {
  background-color: #ed8936;
}

/* === Footer Styles === */
footer {
  background: linear-gradient(145deg, #2d3748, #1a202c);
  color: #ffffff;
  padding: 24px 0;
}

footer .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

footer .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer .mb-4 {
  margin-bottom: 16px;
}

footer .space-x-6 > * + * {
  margin-left: 24px;
}

footer a {
  color: #a0aec0;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

footer a:hover {
  color: #ffffff;
}

footer .border-t {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 24px;
  padding-top: 24px;
  text-align: center;
  color: #a0aec0;
  font-size: 0.875rem;
}

/* === Responsive Adjustments === */
@media (min-width: 768px) {
  main .grid-cols-1.md\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  main .grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  footer .flex {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  main .grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  header .container {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  header .flex {
    width: 100%;
    justify-content: space-between;
  }

  main .md\:grid-cols-4,
  main .md\:grid-cols-3,
  main .lg\:grid-cols-2 {
    grid-template-columns: 1fr;
  }

  footer .flex {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
}
</style> 